<template>
    <div>
      <div>
        <el-input style="width: 240px" placeholder="请输入名称" v-model="params.username"></el-input>
        <el-button style="margin-left: 5px" type="primary" @click="load"><i class="el-icon-search"></i>搜索</el-button>
        <el-button style="margin-left: 5px" type="warning" @click="reset"><i class="el-icon-refresh"></i>重置</el-button>
      </div>
  
      <el-table :data="tableData" stripe>
        <el-table-column prop="id" label="id"></el-table-column>
        <el-table-column prop="username" label="username"></el-table-column>
        <el-table-column prop="createtime" label="createtime"></el-table-column>
        <el-table-column prop="updatetime" label="updatetime"></el-table-column>
  
        <el-table-column label="操作">
          <template v-slot="scope">
  <!--          scope.row this row's data-->
            <el-button type="primary" @click="dialog_edit(scope.row)">编辑</el-button>
            <el-popconfirm
                style="margin-left: 5px"
                title="确定删除吗？"
                @confirm="del(scope.row.id)"
            >
              <el-button slot="reference" type="danger">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
  
      <el-dialog title="编辑用户信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="用户名">
                    <el-input v-model="form.username" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialog_success()">确 定</el-button>
            </div>
        </el-dialog>
  <div class="block" style="position: absolute;bottom: 20px;right: 50px;">
    <el-pagination
    background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.pageNum"
      :page-sizes="[5, 10, 20,50]"
      :page-size="this.params.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
    </div>
  </template>
  
  <script>
  import request from "@/utils/request";
  
  export default {
    name: "User",
    data(){
      return{
        tableData:[
        ],
        form:{},
        total:0,
        params:{
          username:'',
          pageNum:1,
          pageSize:10
        }
      }
    },
    created() {
      this.load()
    },
    methods:{
      load(){
        request.get('/user/page',
            {params:this.params}).then(res=>{
          if(res.code ==='200'){
            this.tableData=res.data.content
            this.total=res.data.totalElements
          }
  
        })
      },
      reset(){
        this.params={
          name:'',
          pageNum:1,
          pageSize:10
        }
        this.load()
      },
      handleCurrentChange(pageNum){
        console.log(pageNum)
        this.params.pageNum=pageNum
        this.load()
      },
      handleSizeChange(val){
        console.log(`每页 ${val} 条`)
        this.params.pageSize=val
        this.load()
      },
      del(id){
        request.delete('/user/delete/'+id).then(res=>{
          if(res.code==='200')
          {
            this.$notify.success("删除成功")
            this.load()
          }else{
            this.$notify.error("删除失败")
          }
        })
      },
      dialog_edit(row) {
            this.dialogFormVisible = true
            this.form = row
        },
        dialog_success() {
            request.post('/user/update', this.form).then(res => {
                if (res.code == 200) {
                    this.$notify.success("修改成功")

                } else {
                    this.$notify.error("修改失败")
                }
                this.form = {}
                this.dialogFormVisible = false
                this.load()
            })

        },
        dialog_failed() {
            this.dialogFormVisible = false
        }
    }
  }
  </script>
  
  <style scoped>
  
  </style>